<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<!DOCTYPE html>
<html>
<head>
    <title>我的收藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary-color: #3498db;
            --danger-color: #e74c3c;
            --text-color: #333;
            --light-gray: #f5f5f5;
            --border-color: #e0e0e0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: var(--light-gray);
            color: var(--text-color);
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            text-align: center;
            color: var(--text-color);
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .collection-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .collection-item {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.2s ease-out;
            background: white;
            position: relative;
            will-change: transform;
        }

        .collection-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .item-image-container {
            position: relative;
            width: 100%;
            padding-top: 75%; /* 4:3 宽高比 */
            background-color: #f8f8f8;
            overflow: hidden;
        }

        .item-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease;
        }

        .item-image.loading {
            opacity: 0;
        }

        .item-image.loaded {
            opacity: 1;
        }

        .item-details {
            padding: 15px;
        }

        .item-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .item-price {
            color: var(--danger-color);
            font-weight: bold;
            margin: 8px 0;
            font-size: 18px;
        }

        .item-time {
            color: #777;
            font-size: 13px;
            margin-bottom: 15px;
        }

        .remove-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--danger-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .remove-btn:hover {
            background-color: #c0392b;
        }

        .remove-btn svg {
            margin-right: 5px;
        }

        .no-collections {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .no-collections svg {
            margin-bottom: 15px;
            opacity: 0.7;
        }

        .loading-placeholder {
            display: none;
            text-align: center;
            padding: 30px;
        }

        @media (max-width: 768px) {
            .collection-list {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 15px;
            }

            .item-details {
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }

            .collection-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>我的收藏</h1>

    <div class="loading-placeholder">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader">
            <line x1="12" y1="2" x2="12" y2="6"></line>
            <line x1="12" y1="18" x2="12" y2="22"></line>
            <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
            <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
            <line x1="2" y1="12" x2="6" y2="12"></line>
            <line x1="18" y1="12" x2="22" y2="12"></line>
            <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
            <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
        </svg>
        <p>加载中...</p>
    </div>

    <c:choose>
        <c:when test="${empty UserCollection}">
            <div class="no-collections">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#ccc" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                </svg>
                <h3>您还没有收藏任何商品</h3>
                <p>快去发现您喜欢的商品吧</p>
            </div>
        </c:when>
        <c:otherwise>
            <div class="collection-list">
                <c:forEach items="${UserCollection}" var="collection">
                    <div class="collection-item">
                        <div class="item-image-container">
                            <img
                                    src="${collection.img}"
                                    alt="${collection.gname}"
                                    class="item-image loading"
                                    onload="this.classList.remove('loading'); this.classList.add('loaded')"
                                    onerror="this.onerror=null; this.src='${pageContext.request.contextPath}/images/default-product.jpg'">
                        </div>
                        <div class="item-details">
                            <div class="item-title">${collection.gname}</div>
                            <div class="item-price">¥${collection.price}</div>
                            <div class="item-time">收藏时间：${collection.time}</div>
                            <form action="${pageContext.request.contextPath}/collection/remove" method="post">
                                <input type="hidden" name="collectionid" value="${collection.collectionid}">
                                <button type="submit" class="remove-btn">

                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                    </svg>
                                    取消收藏
                                </button>
                            </form>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </c:otherwise>
    </c:choose>
</div>

<script>
    // 页面加载完成后隐藏加载指示器
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            document.querySelector('.loading-placeholder').style.display = 'none';
        }, 300);
    });
</script>
</body>
</html>